<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>
    <link rel="stylesheet" href="/css/normalize.css">
    <script src="/js/rem.js"></script>
    <script src="/js/border1px.js"></script>
    <style>
        .searchbar {
            width: 7.5rem;
            height: 0.88rem;
            background: white;
            display: flex;

        }

        .searchbar-left {
            width: 0.8rem;
            height: 0.88rem;
            display: flex;
            justify-content: center;
        }

        .searchbar-left img {
            width: 0.4rem;
            height: 0.4rem;
            align-self: center;
        }

        .searchbar-center {
            width: 5.46rem;
            height: 0.6rem;
            background: #f7f7f7;
            border-radius: 0.3rem;
            align-self: center;
            display: flex;
            position: relative;
        }

        .searchbar-center-icon {
            width: 0.36rem;
            height: 0.36rem;
            background: url(imgs/jd/search-icon.png) no-repeat center center;
            margin-left: 0.3rem;
            align-self: center;
            background-size: 0.5rem;
        }

        .searchbar-center-input {
            /* 228x16 */
            width: 4rem;
            height: 0.32rem;
            border: 0px;
            background: #f7f7f7;
            font-size: 0.24rem;
            color: #232326;
            align-self: center;
            margin-left: 0.1rem;
            outline: 0;
        }

        .searchbar-center-close {
            position: absolute;
            right: .2rem;
            top: .12rem;
            width: 0.36rem;
            height: 0.36rem;
            background: url(./imgs/jd/search-close.png) no-repeat center center;
            background-size: 0.36rem;
        }

        .searchbar-right {
            display: flex;
            margin-left: 0.14rem;
        }

        .searchbar-right a {
            padding: 0.12rem;
            font-size: 0.28rem;
            background: #e93b3d;
            color: white;
            align-self: center;
            border-radius: 0.08rem;
            text-decoration: none;
        }

        .list {
            padding-left: 0.24rem;
            width: 7.26rem;
            height: auto;

        }

        .list-item {
            height: 0.84rem;
            border-bottom: 0.01rem solid #f0f2f5;
            font-size: 0.24rem;
            line-height: 0.84rem;
        }

        .noData {
            height: 0.6rem;
            margin: 0.58rem auto 0.8rem;
            line-height: 0.6rem;
            text-align: center;
            color: #999;
            font-size:0.24rem;
        }
    </style>
</head>

<body>
    <!-- 搜索框 begin -->
    <div class="searchbar">
        <div class="searchbar-left">
            <img src=""
                alt="">
        </div>
        <div class="searchbar-center">
            <span class="searchbar-center-icon"></span>
            <input class="searchbar-center-input" type="text" placeholder="清风抽纸" />
            <span class="searchbar-center-close" style="display:none"></span>
        </div>
        <div class="searchbar-right">
            <a href="javascript">搜索</a>
        </div>
    </div>
    <!-- 搜索框 end -->
    <!-- 搜索列表 begin -->
    <div class="list">
        
    </div>
    <!-- 搜索列表 -->
    <!-- noData begin -->
    <div class="noData">
        已隐藏搜索发现
    </div>
    <!-- noData end -->

    <script src="libs/zepto/zepto.js"></script>
    <script src="libs/zepto/event.js"></script>
    <script src="libs/zepto/ajax.js"></script>
    <script src="libs/zepto/touch.js"></script>
    <script>
        function debounce(fun, delay) {
            var timer;
            return function (args) {
                var that = this;

                clearTimeout(timer);

                timer = setTimeout(function () {
                    fun.call(that, args)
                }, delay)
            }
        }


        //获取数据 
        function getData(value) {
            var html = '';
            $.ajax({
                url: `http://youyong.ba:8080/mock/609a94bd9fdbd7143b8d6737/aa/test?keyword=${value}`,
                success:function (res) {
                    console.log(res, '<--');
                    if (res.data.length > 0) {
                        $('.noData').hide();
                    } else {
                        setNoData();
                        return ;
                    }
                    
                    if (!$.trim(value)) {
                        setNoData();
                        return ;
                    }


                    
                    for (var i=0; i<res.data.length; i++) {
                        html += `<div class="list-item">${res.data[i].title}</div>`;
                    }
                    $('.list').html(html);
                }
            });
        }

        var debounceInpput = debounce(getData, 1000);
        var searchName = $('.searchbar-center-input').val();

        if ($.trim(searchName)) {
            $('.searchbar-center-close').css({ "display": "block" });

        } else {
            $('.searchbar-center-close').css({ "display": "none" });            
        }

        $('.searchbar-center-input').off('keyup').on('keyup', function (e) {
            if ($.trim(this.value)) {
                $('.searchbar-center-close').css({ "display": "block" });

            } else {
                $('.searchbar-center-close').css({ "display": "none" });

            }

            debounceInpput($.trim(this.value));
            // getData($.trim(this.value));

        });

        $('.searchbar-center-close').off('click').on('click', function (e) {
            setNoData();
        });

        function setNoData() {
            $('.searchbar-center-input').val('');
            $('.searchbar-center-close').css({ "display": "none" });
            $('.list').html('');
            $('.noData').show();
        }
    </script>



</body>

</html>